<template>
    <div :style="moduleMain">
        <div :style="homemainbox">
            <div :style="warndiv">
                <div :style="warnlefttitlebox">
                    警报
                </div>
                <div :style="warnbottontitlebox">
                    甲&nbsp;&nbsp;醛&nbsp;&nbsp;浓&nbsp;&nbsp;度
                </div>
                <div :style="warnmainbox">
                    <div :style="warnmainwordbox1">
                        甲醛浓度报警
                        <br>
                        {{jiaquanSheDingFaZhi}}
                        <br>
                        {{jiaquanDangQianZhi}}
                        <br>
                        {{jiaquanChuShiBaoJing}}
                        <br>
                        {{jiaquanChiXuBaoJing}}
                    </div>
                    <div :style="warnmainwordbox2" >
                        <span v-if="jiaquanSpan" v-on:click="alertHandle(jiaquanId,0)">
                            {{jiaquanChuLi}}
                        </span>
                        <div v-if="jiaquanDiv">
                            {{jiaquanChuLi}}
                        </div>
                    </div>
                </div>
            </div>

            <div :style="warndiv1">
                <div :style="warnlefttitlebox">
                    警报
                </div>
                <div :style="warnbottontitlebox">
                    SO2&nbsp;腐&nbsp;蚀&nbsp;性&nbsp;气&nbsp;体
                </div>
                <div :style="warnmainbox">
                   <div :style="warnmainwordbox1">
                        SO2腐蚀性气体报警
                        <br>
                        {{so2SheDingFaZhi}}
                        <br>
                        {{so2DangQianZhi}}
                        <br>
                        {{so2ChuShiBaoJing}}
                        <br>
                        {{so2ChiXuBaoJing}}
                    </div>
                    <div :style="warnmainwordbox2">
                        <span v-if="so2Span" v-on:click="alertHandle(so2Id,1)">
                            {{so2ChuLi}}
                        </span>
                        <div v-if="so2Div">
                            {{so2ChuLi}}
                        </div>
                    </div>
                </div>
            </div>

            <div :style="warndiv2">
                <div :style="warnlefttitlebox">
                    警报
                </div>
                <div :style="warnbottontitlebox">
                    H2S&nbsp;腐&nbsp;蚀&nbsp;性&nbsp;气&nbsp;体
                </div>
                <div :style="warnmainbox">
                    <div :style="warnmainwordbox1">
                        H2S腐蚀性气体报警
                        <br>
                        {{h2sSheDingFaZhi}}
                        <br>
                        {{h2sDangQianZhi}}
                        <br>
                        {{h2sChuShiBaoJing}}
                        <br>
                        {{h2sChiXuBaoJing}}
                    </div>
                    <div :style="warnmainwordbox2">
                        <span v-if="h2sSpan" v-on:click="alertHandle(h2sId,2)">
                            {{h2sChuLi}}
                        </span>
                        <div v-if="h2sDiv">
                            {{h2sChuLi}}
                        </div>
                    </div>
                </div>
            </div>

            <div :style="warndiv3">
                <div :style="warnlefttitlebox">
                    警报
                </div>
                <div :style="warnbottontitlebox">
                    CL2&nbsp;腐&nbsp;蚀&nbsp;性&nbsp;气&nbsp;体
                </div>
                <div :style="warnmainbox">
                    <div :style="warnmainwordbox1">
                        CL2腐蚀性气体报警
                        <br>
                        {{cl2SheDingFaZhi}}
                        <br>
                        {{cl2DangQianZhi}}
                        <br>
                        {{cl2ChuShiBaoJing}}
                        <br>
                        {{cl2ChiXuBaoJing}}
                    </div>
                    <div :style="warnmainwordbox2">
                        <span v-if="cl2Span" v-on:click="alertHandle(cl2Id,3)">
                            {{cl2ChuLi}}
                        </span>
                        <div v-if="cl2Div">
                            {{cl2ChuLi}}
                        </div>
                    </div>
                </div>
            </div>

            <div :style="warndiv4">
                <div :style="warnlefttitlebox">
                    警报
                </div>
                <div :style="warnbottontitlebox">
                    HCL&nbsp;腐&nbsp;蚀&nbsp;性&nbsp;气&nbsp;体
                </div>
                <div :style="warnmainbox">
                    <div :style="warnmainwordbox1">
                        HCL腐蚀性气体报警
                        <br>
                        {{hclSheDingFaZhi}}
                        <br>
                        {{hclDangQianZhi}}
                        <br>
                        {{hclChuShiBaoJing}}
                        <br>
                        {{hclChiXuBaoJing}}
                    </div>
                    <div :style="warnmainwordbox2">
                        <span v-if="hclSpan"  v-on:click="alertHandle(hclId,4)">
                            {{hclChuLi}}
                        </span>
                        <div v-if="hclDiv">
                            {{hclChuLi}}
                        </div>
                    </div>
                </div>
            </div>

            <div :style="warndiv5">
                <div :style="warnlefttitlebox">
                    警报
                </div>
                <div :style="warnbottontitlebox">
                    烟&nbsp;&nbsp;雾&nbsp;&nbsp;浓&nbsp;&nbsp;度
                </div>
                <div :style="warnmainbox">
                    <div :style="warnmainwordbox1">
                        烟雾浓度报警
                        <br>
                        {{smokeSheDingFaZhi}}
                        <br>
                        {{smokeDangQianZhi}}
                        <br>
                        {{smokeChuShiBaoJing}}
                        <br>
                        {{smokeChiXuBaoJing}}
                    </div>
                    <div :style="warnmainwordbox2">
                        <span v-if="smokeSpan" v-on:click="alertHandle(smokeId,5)">
                            {{smokeChuLi}}
                        </span>
                        <div v-if="smokeDiv">
                            {{smokeChuLi}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import swal from 'sweetalert'
export default {
  name: 'homemain',
  mounted () {
    this.sessionId = this.$route.query.username
    this.timer = setInterval(() => {
      this.alertweb()
    }, 3000)
    this.getAlert()
  },
  methods: {
    alertweb: function () {
      let postData = {
        sessionId: this.sessionId
      }
      this.axios.get(process.env.VUE_APP_BASE_API + '/monitor-mqtt/mqtt/alert', {
        params: {
          ...postData
        }
      }).then((response) => {
        if (response.data === 'alertOk') {
          this.getAlert()
        }
      }).catch(error => {
        if (error.response.status === 401) {
          swal({title: '提示', text: '页面过期请重新登录', icon: 'warning', button: '确定'}).then(() => {
            this.$router.push({path: '/'})
          })
        } else if (error.response.status === 402) {
          swal({title: '提示', text: '非法访问强制退出', icon: 'warning', button: '确定'}).then(() => {
            this.$router.push({path: '/'})
          })
        }
      })
    },
    alertHandle: function (alertId, alertType) {
      let postData = {
        alertId: alertId,
        alertType: alertType,
        sessionId: this.sessionId
      }
      this.axios.get(process.env.VUE_APP_BASE_API + '/monitor-homemain/homemain/alertHandle', {
        params: {
          ...postData
        }
      }).then((response) => {
        if (response.data.message === 'success') {
          swal({title: '提示', text: '处理请求已发送，请等待终端回执', icon: 'success', button: '确定'})
        } else {
          swal({title: '提示', text: response.data.message, icon: 'warning', button: '确定'})
        }
      }).catch(error => {
        if (error.response.status === 401) {
          swal({title: '提示', text: '页面过期请重新登录', icon: 'warning', button: '确定'}).then(() => {
            this.$router.push({path: '/'})
          })
        } else if (error.response.status === 402) {
          swal({title: '提示', text: '非法访问强制退出', icon: 'warning', button: '确定'}).then(() => {
            this.$router.push({path: '/'})
          })
        }
      })
    },
    getAlert: function () {
      let postData = {
        sessionId: this.sessionId
      }
      this.axios.get(process.env.VUE_APP_BASE_API + '/monitor-homemain/homemain/getAlert', {
        params: {
          ...postData
        }
      }).then((response) => {
        let list = response.data.list
        if (list !== '') {
          for (let i = 0; i < list.length; i++) {
            switch (list[i].alertType) {
              case 0:
                this.jiaquanId = list[i].alertId
                this.jiaquanSheDingFaZhi = '设定阀值：' + list[i].alertSetUpParameter + 'ppm'
                this.jiaquanDangQianZhi = '报警值：' + list[i].alertNowParameter + 'ppm'
                this.jiaquanChuShiBaoJing = '报警时间：' + list[i].alertDateTimer
                this.jiaquanChiXuBaoJing = '已持续报警：' + (list[i].alertNum * 3) + '分钟'
                this.jiaquanChuLi = list[i].alertWord
                if (this.jiaquanChuLi === '[处理]') {
                  this.jiaquanSpan = true
                  this.jiaquanDiv = false
                } else {
                  this.jiaquanDiv = true
                  this.jiaquanSpan = false
                }
                break
              case 1:
                this.so2Id = list[i].alertId
                this.so2SheDingFaZhi = '设定阀值：' + list[i].alertSetUpParameter + 'ppm'
                this.so2DangQianZhi = '报警值：' + list[i].alertNowParameter + 'ppm'
                this.so2ChuShiBaoJing = '报警时间：' + list[i].alertDateTimer
                this.so2ChiXuBaoJing = '已持续报警：' + (list[i].alertNum * 3) + '分钟'
                this.so2ChuLi = list[i].alertWord
                if (this.so2ChuLi === '[处理]') {
                  this.so2Span = true
                  this.so2Div = false
                } else {
                  this.so2Div = true
                  this.so2Span = false
                }
                break
              case 2:
                this.h2sId = list[i].alertId
                this.h2sSheDingFaZhi = '设定阀值：' + list[i].alertSetUpParameter + 'ppm'
                this.h2sDangQianZhi = '报警值：' + list[i].alertNowParameter + 'ppm'
                this.h2sChuShiBaoJing = '报警时间：' + list[i].alertDateTimer
                this.h2sChiXuBaoJing = '已持续报警：' + (list[i].alertNum * 3) + '分钟'
                this.h2sChuLi = list[i].alertWord
                if (this.h2sChuLi === '[处理]') {
                  this.h2sSpan = true
                  this.h2sDiv = false
                } else {
                  this.h2sDiv = true
                  this.h2sSpan = false
                }
                break
              case 3:
                this.cl2Id = list[i].alertId
                this.cl2SheDingFaZhi = '设定阀值：' + list[i].alertSetUpParameter + 'ppm'
                this.cl2DangQianZhi = '报警值：' + list[i].alertNowParameter + 'ppm'
                this.cl2ChuShiBaoJing = '报警时间：' + list[i].alertDateTimer
                this.cl2ChiXuBaoJing = '已持续报警：' + (list[i].alertNum * 3) + '分钟'
                this.cl2ChuLi = list[i].alertWord
                if (this.cl2ChuLi === '[处理]') {
                  this.cl2Div = false
                  this.cl2Span = true
                } else {
                  this.cl2Div = true
                  this.cl2Span = false
                }
                break
              case 4:
                this.hclId = list[i].alertId
                this.hclSheDingFaZhi = '设定阀值：' + list[i].alertSetUpParameter + 'ppm'
                this.hclDangQianZhi = '报警值：' + list[i].alertNowParameter + 'ppm'
                this.hclChuShiBaoJing = '报警时间：' + list[i].alertDateTimer
                this.hclChiXuBaoJing = '已持续报警：' + (list[i].alertNum * 3) + '分钟'
                this.hclChuLi = list[i].alertWord
                if (this.hclChuLi === '[处理]') {
                  this.hclSpan = true
                  this.hclDiv = false
                } else {
                  this.hclDiv = true
                  this.hclSpan = false
                }
                break
              case 5:
                this.smokeId = list[i].alertId
                this.smokeSheDingFaZhi = '设定阀值：' + list[i].alertSetUpParameter + 'ppm'
                this.smokeDangQianZhi = '报警值：' + list[i].alertNowParameter + 'ppm'
                this.smokeChuShiBaoJing = '报警时间：' + list[i].alertDateTimer
                this.smokeChiXuBaoJing = '已持续报警：' + (list[i].alertNum * 3) + '分钟'
                this.smokeChuLi = list[i].alertWord
                if (this.smokeChuLi === '[处理]') {
                  this.smokeSpan = true
                  this.smokeDiv = false
                } else {
                  this.smokeSpan = false
                  this.smokeDiv = true
                }
                break
            }
          }
        }
      }).catch(error => {
        if (error.response.status === 401) {
          swal({title: '提示', text: '页面过期请重新登录', icon: 'warning', button: '确定'}).then(() => {
            this.$router.push({path: '/'})
          })
        } else if (error.response.status === 402) {
          swal({title: '提示', text: '非法访问强制退出', icon: 'warning', button: '确定'}).then(() => {
            this.$router.push({path: '/'})
          })
        }
      })
    }
  },
  data () {
    return {
      stomp: null,
      sessionId: '',
      smokeSpan: false,
      smokeDiv: false,
      smokeId: '',
      smokeSheDingFaZhi: '暂无报警',
      smokeDangQianZhi: '',
      smokeChuShiBaoJing: '',
      smokeChiXuBaoJing: '',
      smokeChuLi: '',

      hclSpan: false,
      hclDiv: false,
      hclId: '',
      hclSheDingFaZhi: '暂无报警',
      hclDangQianZhi: '',
      hclChuShiBaoJing: '',
      hclChiXuBaoJing: '',
      hclChuLi: '',

      cl2Span: false,
      cl2Div: false,
      cl2Id: '',
      cl2SheDingFaZhi: '暂无报警',
      cl2DangQianZhi: '',
      cl2ChuShiBaoJing: '',
      cl2ChiXuBaoJing: '',
      cl2ChuLi: '',

      h2sSpan: false,
      h2sDiv: false,
      h2sId: '',
      h2sSheDingFaZhi: '暂无报警',
      h2sDangQianZhi: '',
      h2sChuShiBaoJing: '',
      h2sChiXuBaoJing: '',
      h2sChuLi: '',

      so2Span: false,
      so2Div: false,
      so2Id: '',
      so2SheDingFaZhi: '暂无报警',
      so2DangQianZhi: '',
      so2ChuShiBaoJing: '',
      so2ChiXuBaoJing: '',
      so2ChuLi: '',

      jiaquanSpan: false,
      jiaquanDiv: false,
      jiaquanId: '',
      jiaquanSheDingFaZhi: '暂无报警',
      jiaquanDangQianZhi: '',
      jiaquanChuShiBaoJing: '',
      jiaquanChiXuBaoJing: '',
      jiaquanChuLi: '',
      warndiv5: {
        position: 'absolute',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        backgroundImage: 'url(' + require('@/assets/img/14.png') + ')',
        height: '170px',
        width: '260px',
        marginTop: '240px',
        marginLeft: '680px'
        // border: '1px solid #FF0'
      },
      warndiv4: {
        position: 'absolute',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        backgroundImage: 'url(' + require('@/assets/img/14.png') + ')',
        height: '170px',
        width: '260px',
        marginTop: '240px',
        marginLeft: '340px'
        // border: '1px solid #FF0'
      },
      warndiv3: {
        position: 'absolute',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        backgroundImage: 'url(' + require('@/assets/img/14.png') + ')',
        height: '170px',
        width: '260px',
        marginTop: '240px',
        marginLeft: '0px'
        // border: '1px solid #FF0'
      },
      warndiv2: {
        position: 'absolute',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        backgroundImage: 'url(' + require('@/assets/img/14.png') + ')',
        height: '170px',
        width: '260px',
        marginTop: '10px',
        marginLeft: '680px'
        // border: '1px solid #FF0'
      },
      warndiv1: {
        position: 'absolute',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        backgroundImage: 'url(' + require('@/assets/img/14.png') + ')',
        height: '170px',
        width: '260px',
        marginTop: '10px',
        marginLeft: '340px'
        //  border: '1px solid #FF0'
      },
      warndiv: {
        position: 'absolute',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        backgroundImage: 'url(' + require('@/assets/img/14.png') + ')',
        height: '170px',
        width: '260px',
        marginTop: '10px'
        // border: '1px solid #FF0'
      },
      warnmainwordbox1: {
        position: 'relative',
        width: '214px',
        height: '100px',
        textAlign: 'left'
      },
      warnmainwordbox2: {
        position: 'relative',
        width: '214px',
        height: '30px',
        textAlign: 'right',
        top: '2px',
        right: '20px'
      },
      warnlefttitlebox: {
        whiteSpace: 'normal',
        wordBreak: 'break-all',
        wordWrap: 'break-word',
        position: 'absolute',
        height: '170px',
        width: '16px',
        lineHeight: '80px',
        textAlign: 'center'
      },
      warnmainbox: {
        position: 'absolute',
        background: 'rgba(255, 0, 0, 0.3)',
        width: '216px',
        height: '130px',
        marginTop: '12px',
        marginLeft: '28px'
      },
      warnbottontitlebox: {
        position: 'absolute',
        width: '145px',
        height: '20px',
        marginTop: '145px',
        marginLeft: '28px',
        textAlign: 'center',
        lineHeight: '20px'
      },
      moduleMain: {
        position: 'absolute',
        width: '1000px',
        height: '450px',
        marginLeft: '200px',
        top: '0px'
        // border: '1px solid #F00'
      },
      homemainbox: {
        position: 'relative',
        width: '1000px',
        height: '450px',
        color: '#E7EC92'
        // border: '1px solid #FF0'
      }
    }
  }
}
</script>

<style>
    span:hover {
      color: #85C5E8 !important;
    }
    span{
      color:#FFFFFF;
      cursor:pointer !important;
    }
    button:focus,input::-moz-focus-inner, button::-moz-focus-inner{
        outline: 0;
    }
    button:hover{
        background-color:#87CDF1;
    }
    button:active{
        background-color:#006699;
    }
    button{
        cursor:pointer !important;
        background-color:#3BA4EF;
        color:#FFFFFF;
        border-radius: 5px;
        border: none;
        outline: 0;
    }
</style>
